
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
				<top></top> 
				<div class="hei10"></div>
				<div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
					当前位置：
					<router-link to="/index" style="color: #409eff;">分销后台</router-link>>
					<router-link to="/zhibotongji9" style="color: #409eff;"  >直播统计</router-link>>
					编辑打卡
				</div>
				
				<div class="hei10"></div>

                <div class="t_table_box">
					
					<div class="t_title">
						<el-page-header @back="goBack" :content="this.$route.query.name+'直播间打卡记录'">
						</el-page-header>
						
						</div>
					<div style="margin-top: 20px;margin-bottom: 20px;">
						<el-button type="primary" @click="changeday(1)" plain>前一天</el-button>
						<el-button type="primary" @click="changeday(2)" plain>后一天</el-button>
						<el-date-picker
						class="t_time_input"
						style="margin-left: 10px;margin-right: 10px;"
						:clearable="false"
						v-model="choosedate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择日期">
						</el-date-picker>
						<el-button style="background-color: #2974FF;" type="danger" @click="search" round>检索</el-button>
						<el-button style="background-color: #2974FF;" type="danger" @click="changetime('')" round>添加直播记录</el-button>
					</div>
					<el-table
						:header-cell-style="{ 
						background:'#F4F4F4',
						color:'#7D8087'}"
						:data="tableData">
						<el-table-column
							prop="date"
							align="center"
							label="时间段">
							<template slot-scope="scope">
								<span>{{ scope.row.created_at }}</span>
								——
								<span>{{ scope.row.end_at }}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="streamer_name"
							align="center"
							label="打卡主播">
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button
								size="mini"
								type="text"
								@click="changetime(scope.row)">修改</el-button>
							</template>
						</el-table-column>
					</el-table>
                </div>
				

			</div>
		</div>
		<!-- <foot></foot> -->
		<el-dialog
			:title="dialogtitle"
			:visible.sync="isshowdialog"
			width="500px"
			:close-on-click-modal="false"
			center
			>
			<el-select  v-if="!this.chooserow" v-model="choosezb"
			value-key="id"  class="t_select_box"  placeholder="请选择主播">
				<el-option v-for="(item,index) in zblistdata" :key="index" :label="item.name" :value="item"></el-option>
			</el-select>
			<el-time-picker
				class="t_select_box"
				style="margin-top: 15px;margin-bottom: 15px;"
				v-model="starttime"
				value-format="HH:mm:ss"
				placeholder="开始时间">
			</el-time-picker>
			<el-time-picker
				class="t_select_box"
				v-model="endtime"
				value-format="HH:mm:ss"
				placeholder="结束时间">
			</el-time-picker>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="isshowdialog = false">取 消</el-button> -->
				<el-button type="danger" style="background-color: #2974FF;" round @click="updatechange">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	


	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			
		},
		name: 'editdaka',
		data() {
			return{

				tableData: [],
				choosedate:'',
				dialogtitle:'',
				isshowdialog:false,
				chooserow:'',
				choosezb:'',
				zblistdata:[],
				starttime:'',
				endtime:'',
			}
		},
		created() {
			
		},
		mounted(){
			//默认昨天
			var date = new Date();
            var timearr = date.setTime(date.getTime() - 3600 * 1000 * 24);
			this.choosedate = this.timestampToTime(timearr)
			//获取列表
			this.getlist()
			//主播列表
			this.zblist()
		},

		methods: {
			//主播列表
			zblist(){
				axios.get('/api/live-stream/streamer/listx').then((response)=>{
					console.log('主播')
					console.log(response.data.data)
					this.zblistdata=response.data.data.list
				})
			},
			//获取列表
			getlist(){
				axios.get('/api/live-stream/records/list', {
					params:{
						source:this.$route.query.source,
						title:this.$route.query.name,
						start_time:this.choosedate
					}
				}).then(response => {
					if (response.data.msg.code == 0) {
						console.log('列表')
						console.log(response)
						this.tableData = response.data.data
					} else {
						this.$message.error(response.data.msg.info);
						
					}

				})
			},
			//搜索
			search(){
				this.getlist()
			},
			//新建或修改
			changetime(row){
				this.isshowdialog = true
				this.chooserow = row
				if(row==''){
					//新建
					
					this.dialogtitle = '添加直播记录'
					this.choosezb = ''
					this.starttime = ''
					this.endtime = ''
				}else{
					//修改
				
					this.dialogtitle = '修改直播时间'
					this.starttime = this.chooserow.created_at.split(" ")[1]
					this.endtime = this.chooserow.end_at.split(" ")[1]
				}
			},
			//确认修改
			updatechange(){
				console.log(this.choosedate)
				
				if(this.starttime==''||this.starttime==null){
					this.$message.error('请选择开始时间');
					return
				}
				if(this.endtime==''||this.endtime==null){
					this.$message.error('请选择结束时间');
					return
				}

				var form = {}

				if(this.chooserow==''){
					
					//新增
					form = {
						live_record_id:'',
						streamer_id:this.choosezb.id,
						type:this.$route.query.live_platform,
						title:this.$route.query.name,
						source:this.$route.query.source,
						start_time:this.choosedate+' '+this.starttime,
						down_time:this.choosedate+' '+this.endtime,
					}
					
					
				}else{
					//修改
					form = {
						live_record_id:this.chooserow.id,
						streamer_id:this.chooserow.streamer_id,
						type:this.chooserow.live_platform,
						title:this.$route.query.name,
						source:this.$route.query.source,
						start_time:this.choosedate+' '+this.starttime,
						down_time:this.choosedate+' '+this.endtime,
					}
					
				}


				console.log(form)

				

				axios.post('/api/live-stream/streamer/recheck', form).then(response => {
						if (response.data.msg.code == 0) {
							this.$message({
								message: '操作成功',
								type: 'success'
							});
							this.isshowdialog = false
							this.getlist()
						} else {
							this.$message.error(response.data.msg.info);
							
						}

					})
			},
			//前一天后一天
			changeday(type){
				var date = new Date(this.choosedate);
				if(type==1){
					//前一天
					var timearr = date.setTime(date.getTime() - 3600 * 1000 * 24);
					this.choosedate = this.timestampToTime(timearr)
				}else{
					//后一天
					var timearr = date.setTime(date.getTime() + 3600 * 1000 * 24);
					this.choosedate = this.timestampToTime(timearr)
				}

			},
			timestampToTime(timestamp) {
				// 时间戳为10位需*1000，时间戳为13位不需乘1000
				// var date = new Date(timestamp * 1000);
				var date = new Date(timestamp);
				var Y = date.getFullYear() + "-";
				var M =
					(date.getMonth() + 1 < 10
					? "0" + (date.getMonth() + 1)
					: date.getMonth() + 1) + "-";
				var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
				var h = date.getHours() + ":";
				var m = date.getMinutes() + ":";
				var s = date.getSeconds();
				console.log(Y + M + D)
				return Y + M + D;
			},
			goBack(){
				this.$router.push({
					path: '/zhibotongji9'
				})
			}
			
		}
	}
</script>

<style scoped>
.t_title{
	font-size: 24px;
	color: #2C2C2C;
	font-weight: 700;
}
.t_select_box{
	width: 100%;
}
/deep/ .t_time_input .el-input__inner{
	background-color: #F4F3F3;
	border: none;
}
/deep/ .t_select_box .el-input__inner{
	background-color: #F4F3F3;
	border: none;
}
</style>

<style lang="scss" scoped>
	.index {
		.t_table_box{
		    
        padding:0 20px;
		    margin-left: auto;
		    margin-right: auto;
		    margin-top: 50px;
		}

		.see {
			color: #409EFF;
			margin: 20px 0;
			cursor: pointer;
		}

		.cpflex {
			display: flex;
			flex-wrap: wrap;

			/deep/ .el-form-item {
				margin-bottom: 0px;
			}
		}

		.kucun {
			/deep/ .el-input {
				width: 200px;
			}

			.list {
				display: flex;
				text-align: center;
				border-bottom: 1px #EAEAEA solid;

				.bor1 {
					border-right: 1px #EAEAEA solid;

					i {
						color: #409EFF;
						font-size: 14px;
						margin-left: 10px;
						cursor: pointer;
					}
				}

				.th {
					background: #F9F9F9;
					line-height: 45px;
					flex: 1;
					font-size: 14px;
					box-sizing: border-box;
				}

				.td {
					line-height: 45px;
					font-size: 14px;
					flex: 1;
					box-sizing: border-box;
					color: #666;
				}

				.td2 {
					flex: 1.5
				}
			}
		}



				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.bsm {
					padding: 20px 20px 0 20px;

					/deep/.el-input {
						width: 220px;
					}
				}

				.row2 {
					color: #FFF;
					margin-top: 20px;

					a {
						color: #FFF;
					}
				}

				.con {
					margin: 20px;
					border: 1px #EAEAEA solid;

					.list {
						display: flex;
						text-align: center;
						border-bottom: 1px #EAEAEA solid;

						.bor1 {
							border-right: 1px #EAEAEA solid;

							i {
								color: #409EFF;
								font-size: 14px;
								margin-left: 10px;
								cursor: pointer;
							}
						}

						.th {
							background: #F9F9F9;
							line-height: 45px;
							flex: 1;
							font-size: 14px;
							box-sizing: border-box;
						}

						.td {
							line-height: 45px;
							font-size: 14px;
							flex: 1;
							box-sizing: border-box;
							color: #666;
						}

						.td2 {
							flex: 1.5
						}
					}
				}

				/deep/.el-pagination {
					text-align: right;
					margin-right: 20px;
					padding-bottom: 50px;
				}


	}
</style>
